<template>
  <div>
    <el-cascader
      filterable
      clearable
      placeholder="试试搜索：手机"
      v-model="paths"
      :options="categoryList"
      :props="setting"
    ></el-cascader>
  </div>
</template>

<script>
import { categoryTree } from '@/api/product/category'

export default {
  props: {
    categoryPath: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  data() {
    return {
      setting: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      categoryList: [],
      paths: this.categoryPath
    };
  },
  watch:{
    categoryPath(){
      this.paths = this.categoryPath;
    },
    paths(v){
      this.$emit("update:categoryPath",v);
    }
  },
  methods: {
    categoryTree() {
      categoryTree().then(res => {
        this.categoryList = res.data;
      });
    }
  },
  created() {
    this.categoryTree();
  }
};
</script>
